<style type="text/css">
  .page-header .left {
    width: calc(100% - 220px);
  }

  @media only screen and (max-width: 479px) and (min-width: 320px) {
    .page-header .left {
      width: 100%;
    }
  }
</style>
<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['供应链管理', '品质管理', '制程检测统计']"
      icon="fa fa-cogs"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>制程检测统计</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn">
                <div class="selectDate top_module">
                  <div class="input-daterange input-group s_selected_time_box s_hover_box">
                    <input
                      type="text"
                      [(ngModel)]="startTime"
                      class="form-control s_selected_time"
                      id="datetimepicker1"
                      autocomplete="off"
                      placeholder="选择开始时间"
                    />
                    <span class="s_selected_time_spe">至</span>
                    <input
                      type="text"
                      [(ngModel)]="endTime"
                      class="form-control s_selected_time"
                      id="datetimepicker2"
                      autocomplete="off"
                      placeholder="选择结束时间"
                    />
                    <div class="s_del_icon" (click)="del_date()">x</div>
                  </div>
                </div>
                <button class="btn btn-primary" (click)="table_search()">查询</button>
                <button class="btn btn-primary" type="button" (click)="exportData()">导出</button>
                <button type="button" class="btn btn-primary" (click)="synchro()">同步数据</button>
              </div>
            </div>
            <div class="table_scroll">
              <table
                class="
                  display
                  dataTables
                  responsive
                  table table-striped table-bordered table-hover
                  dataTable
                  s_h5_table
                "
              >
                <thead>
                  <tr>
                    <th>日期</th>
                    <th>订单号</th>
                    <th>SMT检测数量</th>
                    <th>SMT不良数量</th>
                    <th>SMT不良率</th>
                    <th>PCBA烧录测试数量</th>
                    <th>PCBA烧录测试不良数量</th>
                    <th>PCBA烧录测试不良率</th>
                    <th>主机组装测试数量</th>
                    <th>主机组装测试不良数量</th>
                    <th>主机组装测试不良率</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData">
                    <td>{{ row.checkDate }}</td>
                    <td>{{ row.orderCode }}</td>
                    <td>{{ row.smtCheckNum }}</td>
                    <td>
                      {{ row.smtBadNum }}
                      <button type="button" (click)="viewRow(row, viewCarModal, 1)" *ngIf="row.smtBadNum">查看</button>
                    </td>
                    <td>{{ row.smtBadRatio }}%</td>
                    <td>{{ row.pcbaCheckNum }}</td>
                    <td>
                      {{ row.pcbaBadNum }}
                      <button type="button" (click)="viewRow(row, viewCarModal, 2)" *ngIf="row.pcbaBadNum">查看</button>
                    </td>
                    <td>{{ row.pcbaBadRatio }}%</td>
                    <td>{{ row.hostCheckNum }}</td>
                    <td>
                      {{ row.hostBadNum }}
                      <button type="button" (click)="viewRow(row, viewCarModal, 3)" *ngIf="row.hostBadNum">查看</button>
                    </td>
                    <td>{{ row.hostBadRatio }}%</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="tabletotalCount"
                [rows]="pageSize"
                [currentPage]="curPage - 1"
                (onPageChange)="tablePaginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>

  <!-- 不良数量查看   弹窗-->
<section bsModal #viewCarModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content" style="width: 700px;">
			<div class="modal-header">
				<button type="button" class="close" (click)="closeViewCarModal(viewCarModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">{{typeName}}--查看</h4>
			</div>
      <div class="modal-body">
        <table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
          <thead>
            <tr>
              <th>订单号</th>
              <th>检测数量</th>
              <th>不良数量</th>
              <th>不良率</th>
            </tr>
          </thead>
          <tbody class="carBody">
            <tr>
              <td>{{viewDataObj.orderCode}}</td>
              <td>{{viewDataObj.testingNum}}</td>
              <td>{{viewDataObj.badNum}}</td>
              <td>{{viewDataObj.badrate}}%</td>
            </tr>
          </tbody>
        </table>
        <div class="row form-horizontal table_scroll" *ngIf="viewCarData.length != 0" style="max-height:400px;margin-top: 20px;">
          <table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
            <thead>
              <tr>
                <th>不良原因</th>
                <th>不良数量</th>
              </tr>
            </thead>
            <tbody class="carBody">
              <tr *ngFor="let row of viewCarData; let i = index" [attr.data-index]="i">
                <td>{{row.name}}</td>
                <td>{{row.count}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
		</div>
	</div>
</section>
<!-- 不良数量查看 弹窗end-->
</div>
